@import "./variables.scss";
@import "./mixin.scss";
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";
@import "./btn.scss";

body {
	height: calc(100% - 2px);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	// font-family: SimSun;
}

label {
	font-weight: 700;
}

html {
	height: 100%;
	box-sizing: border-box;
	font-size: 16px;
}

@media screen and (max-width: 1366px) {
	html {
		font-size: 12px;
	}
}

@media screen and (max-width: 1600px) and (min-width: 1367px) {
	html {
		font-size: 14px;
	}
}

ul,
li {
	list-style: none;
	padding: 0;
	margin: 0;
}

#app {
	height: 100%;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

.no-padding {
	padding: 0px !important;
}

.padding-content {
	padding: 4px 0;
}

a:focus,
a:active {
	outline: none;
}

a,
a:focus,
a:hover {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}

div:focus {
	outline: none;
}

.fr {
	float: right;
}

.fl {
	float: left;
}

.pr-5 {
	padding-right: 5px;
}

.pl-5 {
	padding-left: 5px;
}

.block {
	display: block;
}

.pointer {
	cursor: pointer;
}

.inlineBlock {
	display: block;
}

.clearfix {
	&:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
}

aside {
	background: #eef1f6;
	padding: 8px 24px;
	margin-bottom: 20px;
	border-radius: 2px;
	display: block;
	line-height: 32px;
	font-size: 16px;
	// font-family: SimSun;
	// font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color: #2c3e50;
	// color: #666666;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	a {
		color: #337ab7;
		cursor: pointer;

		&:hover {
			color: rgb(32, 160, 255);
		}
	}
}
.app-containers {
	padding: 10px 15px;
	background-color: #ffffff;
	height: 100%;
}
//main-container全局样式
.app-container {
	padding: 10px 15px;
	background-color: #ffffff;
	// margin-top: 7px;
	// height: calc(100% - 7px);
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.informationTab {
	flex: auto;
	overflow: hidden;
}

.components-container {
	margin: 30px 50px;
	position: relative;
}

.text-center {
	text-align: center;
}

.sub-navbar {
	height: 50px;
	line-height: 50px;
	position: relative;
	width: 100%;
	text-align: right;
	padding-right: 20px;
	transition: 600ms ease position;
	background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

	.subtitle {
		font-size: 20px;
		color: #fff;
	}

	&.draft {
		background: #d0d0d0;
	}

	&.deleted {
		background: #d0d0d0;
	}
}

.link-type,
.link-type:focus {
	color: #337ab7;
	cursor: pointer;

	&:hover {
		color: rgb(32, 160, 255);
	}
}

.filter-container {
	padding-bottom: 10px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}
}

//refine vue-multiselect plugin
.multiselect {
	line-height: 16px;
}

.multiselect--active {
	z-index: 1000 !important;
}

.el-menu-item,
.el-submenu__title {
	font-size: 16px !important;
}

label {
	font-weight: normal !important;
}

.el-link.el-link--info,
.el-link.el-link--info:hover {
	color: #333;
}

.selectInfoStation .el-input.is-disabled .el-input__inner {
	background-color: #ffffff;
	color: #606266;
}

.el-input el-input--small el-input--suffix {
	border-radius: 1px;
}

.el-form-item--medium {
	.el-form-item__label,
	.el-form-item__content {
		line-height: 32px;
	}
}

.el-button--danger.is-disabled,
.el-button--danger.is-disabled:hover,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:active {
	background-color: #dc6068;
	border-color: #dc6068;
}

.el-button + .el-button {
	margin-left: 2px;
}

.el-form--inline .el-form-item.mr_10 {
	margin-right: 10px !important;
}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
	line-height: 20px;
	// max-width: 25rem;
	background-color: #fff;
	color: #606266;
}

.vue-treeselect {
	height: 32px !important;
	line-height: 32px;

	.vue-treeselect__control {
		height: 32px !important;
		line-height: 32px;
		display: block !important;

		.vue-treeselect__value-container {
			height: 32px !important;
			line-height: 32px;
		}
	}
}

.el-date-editor {
	// height: 32px !important;
	line-height: 32px;
}

/** 提示弹窗标题样式*/

.el-message-box {
	.el-message-box__header {
		padding: 10px 15px !important;
		border-bottom: 1px solid #e6e6e6;

		.el-message-box__title {
			color: $base-menu-ActiveText;
			font-size: 20px;
		}

		.el-message-box__headerbtn {
			top: 7px;
			font-size: 22px;
		}
	}
}

.addEditDialog.needPBDialog {
	.el-dialog__body {
		padding-bottom: 22px;
	}
}

.detailBox {
	margin: 10px;
	padding: 2.9vh 2.1vw;

	.el-row {
		line-height: 40px;
		color: #333;

		.list-title {
			font-weight: bold;
			color: #000;
		}
	}
}

//操作列删除文本按钮颜色
.delBtn_R {
	color: #cf2934;
}

.editBtn_R {
	color: #ffba00;
}

.addkaohe {
	color: #36a99e;
}

.linelearn {
	color: #2499f7;
}

.lookBtn {
	color: #000000;
}

.delBtn_R:hover,
.delBtn_R:focus {
	color: #d9545d;
}

.pr_45 input {
	padding-right: 45px !important;
}

.el-image-viewer__btn.el-image-viewer__close {
	color: #fff;
}

.el-button--mini {
	font-size: 14px;
}

/**动态设置表格表头固定样式 */

// .eleTab {
// 	.el-table__header-wrapper {
// 		position: fixed;
// 		z-index: 9;
// 		top: 115px;
// 		right: 142px;
// 		padding-left: 356px;
// 	}

// 	.el-table__fixed-header-wrapper .fixed-width {
// 		position: fixed;
// 		width: 200px !important;
// 		top: 116px;
// 		height: 46px;
// 		right: 21px;
// 	}

// 	.el-table__body-wrapper {
// 		margin-top: 50px !important;
// 	}

// 	.el-table__fixed-body-wrapper {
// 		z-index: 2;
// 		top: 50px !important;
// 	}

// 	.el-table__fixed-right {
// 		z-index: 10;
// 	}
// }

// .eleTabs {
// 	.el-table__header-wrapper {
// 		position: fixed;
// 		z-index: 9;
// 		top: 115px;
// 		right: 142px;
// 		padding-left: 210px;
// 	}

// 	.el-table__fixed-header-wrapper .fixed-width {
// 		position: fixed;
// 		width: 200px !important;
// 		top: 116px;
// 		height: 46px;
// 		right: 21px;
// 	}

// 	.el-table__body-wrapper {
// 		margin-top: 50px !important;
// 	}

// 	.el-table__fixed-body-wrapper {
// 		z-index: 2;
// 		top: 50px !important;
// 	}

// 	.el-table__fixed-right {
// 		z-index: 10;
// 	}
// }

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
	background-color: #f1f1f1 !important;
	color: #606266 !important;
}

element.style {
	width: 178px;
}

.el-table .cell.el-tooltip {
	white-space: nowrap;
	min-width: 100px;
}

.el-table .cell {
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: break-all;
	line-height: 23px;
	padding-left: 10px;
	padding-right: 10px;
}

.el-button--primary {
	border-radius: 3px;
}

.el-dropdown-menu--mini .el-dropdown-menu__item {
	line-height: 35px;
	padding: 0 20px;
	font-size: 14px;
}

// 打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小
.el-popup-parent--hidden {
	padding-right: 0px !important;
	overflow: hidden !important;
}

// dct start

.add-form1 {
	.el-date-editor.el-input,
	.el-date-editor.el-input__inner,
	.el-select,
	.el-input-number {
		width: 100%;
	}
}

.add-form2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	> div {
		width: 48%;
	}
	.el-date-editor.el-input,
	.el-date-editor.el-input__inner,
	.el-select,
	.el-input-number,
	.el-cascader {
		width: 100%;
	}
}
.queryForms {
	.el-input {
		width: 190px !important;
	}
}
// dct end
.el-form {
	.el-input__inner {
		padding-right: 70px !important;
	}

	.pagination-container {
		.el-input__inner {
			padding: 0 15px !important;
		}
	}
}
// .informationTab{
//   .el-input__inner {
// 		padding-right: 60px !important;
// 	}
// }
.el-date-editor .el-input__inner {
	padding-right: 30px !important;
}
.el-input-number .el-input__inner {
	padding-right: 50px !important;
}
.el-select .el-input__inner {
	padding-right: 30px !important;
}
.el-cascader .el-input__inner {
	padding-right: 30px !important;
}
.el-date-editor.el-input__inner {
	padding: 3px 10px !important;
}

// 添加编辑弹窗样式
.el-dialog {
	background: transparent;
	border: none !important;
	border-radius: 100px !important;
	.el-dialog__header {
		// height: 52px;
		background-color: #1c7f8a;
		// background-image: url("../images/tk-top.png");
		// background-repeat: no-repeat;
		// background-size: 100% 60px;
		padding: 13px 20px !important;
		.el-dialog__title {
			color: #fff;
			// background: linear-gradient(to bottom, #fff, #00d9f1);
			// color: transparent;
			// -webkit-background-clip: text;
		}
		.dialog-header-title {
			color: #fff;
			font-size: 20px;
			display: flex;
			align-items: center;
		}
		.el-dialog__headerbtn {
			top: 14px;
			font-size: 22px;
			// margin-top: 6px;
			margin-right: 10px;
		}

		.el-dialog__headerbtn .el-dialog__close {
			color: #fff;
		}
	}

	.el-dialog__body {
		background: #fff;
		// border: 2px solid #1c7f8a;
		padding: 22px 20px;
		padding-bottom: 20px;
		border-bottom: none;
	}

	.el-dialog__footer {
		padding-top: 20px;
		background: #fff;
		border-top: none;
		// border: 2px solid #1c7f8a;
		// border-bottom: none;
		border-top: none;
	}

	.dialog-footer {
		.el-button {
			margin-right: 6px;
		}
	}
}
// 删除提示弹框字体大小
.el-message-box__content {
	font-size: 16px !important;
}
// el-table中fixed的字段底部出现一条横线
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right {
	height: 100% !important;
}

/* 修改滚动条背景 */
.el-table {
	::-webkit-scrollbar {
		height: 8px !important;
	}
	/* 修改滚动条前景（thumb）部分 */
	::-webkit-scrollbar-thumb {
		background-color: #ccc; /* 设置滚动条颜色 */
	}

	/* 定位滚动条，使其在固定列的上方 */
	.el-table__body-wrapper::-webkit-scrollbar {
		position: absolute !important;
		z-index: 9999999 !important;
	}

	/* 定位滚动条轨道，确保滚动条轨道不会遮挡内容 */
	// .el-table__body-wrapper::-webkit-scrollbar-track {
	//   background-color: transparent !important;
	// }

	// /* 当悬停在滚动条上时的效果 */
	::-webkit-scrollbar-thumb:hover {
		background-color: #888; /* 设置滚动条悬停时的颜色 */
	}

	// /* 添加按钮到滚动条两端 */
	::-webkit-scrollbar-button {
		display: none; /* 不显示默认的滚动条按钮 */
	}

	// /* 修改滚动条轨道（track）部分 */
	::-webkit-scrollbar-track {
		// background-color: #f2f2f2; /* 设置滚动条轨道颜色 */
	}
}

.top-right-btn {
	.el-button {
		margin: 0 5px;
	}
}

.el-table th {
	text-align: center !important;
}

// An highlighted block
// ::v-deep .el-table{
// 	::v-deep .el-table__body-wrapper::-webkit-scrollbar{
// 		width:12px;
// 		height:12px;
// 	}
// 	::v-deep .el-table__body-wrapper::-webkit-scrollbar-thnmb{
// 		background-color:#ccc !important;
// 		border-radius:5px;
// 	}
// 	// 此段可写可不写 用处：可使固定列的高度不盖住滚动条
// 	// /deep/.el-table__fiexd,
// 	// .el-table__fixed-right{
// 	//  height:calc(100% - 12px)!important;
// 	//}
// 	// 关键代码，解决错位问题 思路就是表格固定列显示滚动条后把表格顶上来
// 	::v-deep .el-table-fixed .el-table__body{
// 		padding-bottom:12px !important;
// 	}
// }
.el-table {
	.el-input__inner,
	.el-textarea__inner {
		border: 1px solid #37b3b3 !important;
	}
}

// 使用 font-face 引入我们的字体包
@font-face {
	// 自定义字体包的名字
	font-family: "ALIMAMASHUHEITI-BOLD";
	// 引入路径
	src: url("../font/ALIMAMASHUHEITI-BOLD.TTF");
}
